<template>
    <Modal
        :value="editModalStatus"
        title="添加/编辑"
        @on-ok="ok"
        @on-cancel="cancel">
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
            <FormItem label="菜单名称" prop="resourceName">
                <Input v-model="formValidate.resourceName" placeholder="请输入菜单名称"></Input>
            </FormItem>
            <FormItem label="菜单路由" prop="resourceUrl">
                <Input v-model="formValidate.resourceUrl" placeholder="请输入菜单路由"></Input>
            </FormItem>
            <FormItem label="菜单图标" prop="resourceCss">
                <Input v-model="formValidate.resourceCss" placeholder="请输入菜单图标"></Input>
            </FormItem>
            <FormItem label="排序值" prop="sort">
                <Input v-model="formValidate.sort" placeholder="请输入排序值"></Input>
            </FormItem>
            <FormItem label="功能" prop="menuFunction">
                <RadioGroup v-model="formValidate.menuFunction">
                    <Radio label="0">链接</Radio>
                    <Radio label="1">功能按钮</Radio>
                </RadioGroup>
            </FormItem>
            <FormItem label="状态" prop="status">
                <RadioGroup v-model="formValidate.status">
                    <Radio label="0">禁用</Radio>
                    <Radio label="1">启用</Radio>
                </RadioGroup>
            </FormItem>
        </Form>
    </Modal>
</template>
<script>
    import API from '../../config/api'
    import qs from 'qs'
    export default {
        props: ['editModalStatus','editData','pId' ,'resourceType'],
        data () {
            return {
                formValidate:{
                    resourceId: '',
                    resourceName: '',
                    resourceUrl: '',
                    resourceCss: '',
                    sort: '',
                    pId: '',
                    menuFunction:'1',
                    status:'1',
                    resourceType: this.resourceType
                },
                ruleValidate: {
                    resourceName: [
                        { required: true, message: '菜单名不能为空', trigger: 'blur' }
                    ],
                    resourceUrl: [
                        { required: true, message: '路由名不能为空', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.ok();
                    } else {
                        this.$Message.error('信息未完善!');
                    }
                })
            },
            ok () {
                this.axios.post(API.EDIT_RESOURCE, qs.stringify(this.formValidate)).then(response => {
                    if (response.data.code === 1) {
                        switch (this.resourceType) {
                            case 1:
                                break;
                            case 2:
                                this.$router.push({name:'Resource'});
                                break;
                            case 3:
                                this.$router.push({name:'saasResourceManager'});
                                break;
                            default:
                                break;
                        }

                        this.$Message.success(response.data.msg);
                    } else {
                        this.$Message.error(response.data.msg);
                    }
                    this.cancel();
                }, response => {
                    this.$Message.error('网络异常!');
                })
            },
            cancel () {
                this.$emit('closeModal');
            }
        },
        watch:{
            editData(val, oldVal){
                if(val.resourceId){
                    for(let key in this.formValidate){
                        this.formValidate[key] = val[key];
                    }
                }else {
                    this.formValidate = {
                        resourceId: '',
                        resourceName: '',
                        resourceUrl: '',
                        resourceCss: '',
                        sort: '',
                        pId: '',
                        menuFunction:'1',
                        status:'1',
                        resourceType: this.resourceType
                    };
                    this.$nextTick(function () {
                        this.formValidate.pId = this.pId;
                    })
                }
            }
        }
    }
</script>
